<template>
  <section class="flex flex-col items-center bg_bebff7 relative">
    <transition>
      <img v-if="show" alt="" class="absolute rule_icon" src="@/assets/ruleIcon.png"
           @click="show=false"/>

      <!--      <img v-if="show" alt="" class="absolute rule_icon" src="@/assets/ruleIcon.png"-->
      <!--           @click="ruleModelRef!.showPopup()"/>-->
    </transition>
    <img alt="" class="absolute close_icon" src="@/assets/close.png" @click="sendMessage(CLINET_COMMAND.CLOSE)"/>
    <header class="nav_bar">
      <div class="absolute tab_bar flex justify-between">
        <img
          v-for="(item, index) in tabArr"
          :key="item.name"
          :src="navArr[index][currentIndex === index ? 0 : 1]"
          alt=""
          class="tab_item"
          @click="tabClick(index)"
        />
      </div>
    </header>
    <component :is="componentArr[currentIndex]"/>
  </section>
  <ruleModel ref="ruleModelRef"/>
</template>

<script lang="ts" setup>
import ruleModel from '@/components/ruleModel/index.vue'
import navArr from '@/views/navImg'
import homepage from '@/views/homepage/index.vue'
import rankList from '@/views/rankList/index.vue'
import rankRecord from '@/views/rankRecord/index.vue'
import {sendMessage} from '@/utils'
import {CLINET_COMMAND} from '@/utils/types'

const currentIndex = ref(0)
const show = ref(true)

const ruleModelRef = ref<InstanceType<typeof ruleModel>>()

const tabArr = [
  {
    name: 'ConfessionsSquare',
    routeName: 'homepage',
  },
  {name: 'moveList', routeName: 'rankList'},
  {name: 'rankRecord', routeName: 'rankRecord'},
]

const currentComponent = shallowRef(homepage)
const componentArr = [homepage, rankList, rankRecord]

function tabClick(index: number) {
  currentIndex.value = index
}
</script>

<style lang="scss" scoped>
.bg_bebff7 {
  background-color: #bebff7;
}

.nav_bar {
  width: 100vw;
  height: 500px;
  background-image: url('@/assets/navBg.png');
  background-size: 100% 100%;

  .tab_bar {
    top: 466px;
    padding: 0 8px;
    width: 100vw;
    height: 35px;
    box-sizing: border-box;
    z-index: 10;
  }

  .tab_item {
    width: 114px;
    height: 35px;
    //object-fit: cover;
  }
}

.rule_icon {
  top: 85px;
  right: 0;
  width: 23px;
  height: 72px;
}

.close_icon {
  top: 50px;
  left: 14px;
  width: 33px;
  height: 33px;
}

.v-enter, .v-leave-to {
  opacity: 0;
}

.v-enter-active, .v-leave-active {
  transition: opacity 1s;
}
</style>
